
import MenuToggle from '../components/MenuToggle';
import { useNavigate } from 'react-router-dom';
import { Grid3X3, Trash2, Search, MoreVertical, Upload, Edit, List, FolderPlus, Home, Download, Share, ChevronRight } from 'lucide-react';
import FileSystemHeader from '../components/FileSystemHeader';
import CloudIcon from '../components/CloudIcon';
import Breadcrumb from '../components/Breadcrumb';
import React, { useEffect, useState } from 'react';
import FileGrid from '../components/FileGrid';
import FileList from '../components/FileList';
import UploadArea from '../components/UploadArea';
const MyFiles = ({ toggleSidebar }) => {
  const navigate = useNavigate();
  const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'list'
  const [searchQuery, setSearchQuery] = useState('');
  const [currentPath, setCurrentPath] = useState(['我的文件']);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [showUploadArea, setShowUploadArea] = useState(false);

  // 模拟文件数据
  const [files] = useState([
    {
      id: 1,
      name: '项目文档',
      type: 'folder',
      size: null,
      modified: '2024-01-15',
      items: 12
    },
    {
      id: 2,
      name: '设计稿',
      type: 'folder',
      size: null,
      modified: '2024-01-14',
      items: 8
    },
    {
      id: 3,
      name: '产品需求文档.pdf',
      type: 'pdf',
      size: '2.4 MB',
      modified: '2024-01-13'
    },
    {
      id: 4,
      name: '用户界面设计.fig',
      type: 'figma',
      size: '15.7 MB',
      modified: '2024-01-12'
    },
    {
      id: 5,
      name: '项目截图.png',
      type: 'image',
      size: '1.2 MB',
      modified: '2024-01-11'
    },
    {
      id: 6,
      name: '会议记录.docx',
      type: 'document',
      size: '456 KB',
      modified: '2024-01-10'
    },
    {
      id: 7,
      name: '数据分析.xlsx',
      type: 'spreadsheet',
      size: '3.1 MB',
      modified: '2024-01-09'
    },
    {
      id: 8,
      name: '演示文稿.pptx',
      type: 'presentation',
      size: '8.9 MB',
      modified: '2024-01-08'
    }
  ]);

  const filteredFiles = files.filter(file =>
    file.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleFileSelect = (fileId) => {
    setSelectedFiles(prev => 
      prev.includes(fileId) 
        ? prev.filter(id => id !== fileId)
        : [...prev, fileId]
    );
  };

  const handleFolderOpen = (folderName) => {
    setCurrentPath(prev => [...prev, folderName]);
  };

  const handleBreadcrumbClick = (index) => {
    setCurrentPath(prev => prev.slice(0, index + 1));
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-12">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮、标题和搜索 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <CloudIcon className="w-8 h-8 text-yellow-500" />
                <h1 className="text-2xl font-bold text-yellow-600">
                  筋斗云
                </h1>
              </div>
              
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
                <input
                  type="text"
                  placeholder="搜索文件和文件夹..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 pr-4 py-2 w-80 border border-material-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                />
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <FileSystemHeader 
              searchQuery={searchQuery}
              onSearchChange={setSearchQuery}
              viewMode={viewMode}
              onViewModeChange={setViewMode}
              onUploadClick={() => setShowUploadArea(true)}
              selectedCount={selectedFiles.length}
              hideSearch={true}
              hideTitle={true}
            />
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        {/* 面包屑导航 */}
        <Breadcrumb 
          path={currentPath}
          onPathClick={handleBreadcrumbClick}
        />

        {/* 上传区域 */}
        {showUploadArea && (
          <UploadArea onClose={() => setShowUploadArea(false)} />
        )}

        {/* 文件列表 */}
        <div className="mt-6">
          {viewMode === 'grid' ? (
            <FileGrid 
              files={filteredFiles}
              selectedFiles={selectedFiles}
              onFileSelect={handleFileSelect}
              onFolderOpen={handleFolderOpen}
            />
          ) : (
            <FileList 
              files={filteredFiles}
              selectedFiles={selectedFiles}
              onFileSelect={handleFileSelect}
              onFolderOpen={handleFolderOpen}
            />
          )}
        </div>

        {/* 空状态 */}
        {filteredFiles.length === 0 && (
          <div className="text-center py-12">
            <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
              <Search className="w-8 h-8 text-material-grey-500" />
            </div>
            <h3 className="text-lg font-medium text-material-grey-700 mb-2">
              {searchQuery ? '未找到匹配的文件' : '文件夹为空'}
            </h3>
            <p className="text-material-grey-500">
              {searchQuery ? '尝试使用不同的关键词搜索' : '开始上传文件或创建文件夹'}
            </p>
          </div>
        )}
      </div>
    </>
  );
};

export default MyFiles;
